<template>
  <div class="box">
    <div class="room"></div>

    <div class="login">
      <i class="el-icon-shopping-cart-1" @click="$router.push('/cart')"></i>
      <a>Login</a>
      <a>Logoute</a>
    </div>
    <div class="room"></div>
    <el-container>
      <el-header class="head">
        <span>
          sort by:
          <span @click="pai">
            price:
            <i class="el-icon-d-caret" v-show="sort == 0"></i>
            <i class="el-icon-caret-top" v-show="sort == 1"></i>
            <i class="el-icon-caret-bottom" v-show="sort == 2"></i>
          </span>
        </span>
      </el-header>
      <el-container>
        <el-aside width="252px" class="toom">
          <h1 class="hh">PRICE:</h1>
          <ul>
            <li
              v-for="(item,index) in prices"
              :key="index"
              :class="{act:pindex == index}"
              @click="pindex = index"
            >{{ item }}</li>
          </ul>
        </el-aside>
        <el-main>
          <div class="list">
            <ul>
              <li v-for="(item,index) in searList" :key="index">
                <img :src="'/img/'+item.productImage" alt />
                <p>{{ item.productName }}</p>
                <p>${{ item.salePrice }}</p>
                <el-button @click="addcart">加入购物车</el-button>
              </li>
            </ul>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sort: 0,
      pindex: 0,
      list: [],
      prices: [
        "All",
        "0.00-100.00",
        "100.00-500.00",
        "500.00-1000.00",
        "1000.00-2000.00",
        "2000.00-5000.00",
      ],
    };
  },
  created() {},
  computed: {
    searList() {
      let good = this.list;
      //sort排序
      good.sort((a, b) => {
        if (this.sort == 1) {
          return a.salePrice - b.salePrice;
        } else if (this.sort == 2) {
          return b.salePrice - a.salePrice;
        }
      });

      return good;
    },
  },
  mounted() {
    this.shang();
  },
  methods: {
    shang() {
      this.$axios({
        url: "/data.json",
      }).then((res) => {
        console.log(res);
        this.list = res.result.list;
      });
    },
    pai() {
      if (this.sort == 0 || this.sort == 2) {
        this.sort = 1;
      } else {
        this.sort = 2;
      }
    },
    addcart() {
      this.$message({
        message: "加入购物车",
        type: "success",
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #e7ecf3;

  color: #333;
  //   text-align: center;
  line-height: 100px;
  list-style: none;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
.box {
  width: 90%;
  margin: 0 auto;
  .room {
    width: 100%;
    height: 10px;
    background-color: #e7ecf3;
  }
  .login {
    width: 100%;
    text-align: right;
    line-height: 60px;
    margin-bottom: 10px;
  }
  .head {
    text-align: right;
  }
  .toom {
    width: 15%;
    // padding: 10px;
    .hh {
      margin-left: 36px;
      font-size: 36px;
    }
    ul {
      list-style: none;
      //   width: 100%;

      //   line-height: 100px;
      background-color: #e7ecf3;
      li {
        line-height: 60px;
        font-size: 16px;
        margin-bottom: 10px;
        // padding: 10px;
      }
      li.act {
        border-left: #a00000 3px solid;
        color: #a00000;
        font-weight: bold;
        text-indent: 8px;
      }
    }
  }
  .list {
    ul {
      list-style: none;
      width: 96%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 23%;
        background-color: #ffffff;
        padding-bottom: 20px;
        margin: 1%;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
